<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面元素速查器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        #topNavContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: start;
            align-items: center;
        }

        #btn_quick_get_data {
            margin-left: 10px;
        }

        #contentRoot {
            margin-top: 80px;
            /* 为内容留出按钮的高度 */
            text-align: left;
            overflow: auto;
            margin-left: 0px;
            padding: 20px;
            transition: margin-left 0.3s;
        }

        #contentRoot.active {
            margin-left: 250px;
        }

        #sidebar {
            padding-top: 10px;
            padding-bottom: 50px;
            height: 100%;
            width: 0;
            position: fixed;
            top: 60px;
            left: 0;
            background-color: #f2f2f2;
            overflow-x: hidden;
            transition: width 0.3s;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }

        #sidebar.active {
            width: 250px;
        }

        .remote {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 10px auto;
            border-radius: 50%;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .button {
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 16px;
        }

        .setting {
            width: 40px;
            height: 40px;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            display: flex;
            margin-left: auto;
            float: right;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .action {
            width: 120px;
            height: 40px;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            margin: 20px auto;
            cursor: pointer;
            font-size: 16px;
        }

        .action:hover {
            background-color: #e0e0e0;
        }

        .button:hover {
            background-color: #e0e0e0;
        }

        .button.top {
            top: 10px;
        }

        .button.bottom {
            bottom: 10px;
        }

        .button.left {
            left: 10px;
        }

        .button.right {
            right: 10px;
        }

        .form-control {
            margin-right: 10px;
        }

        .form-control.setting {
            margin-right: 0px;
        }

        .input-group {
            padding-left: 10px;
            padding-right: 10px;
        }

        .input-group-text.node {
            width: 80px;
            align-items: center;
        }

        .input-group-text.save {
            width: 40px;
            align-items: center;
        }

        .clickTip {
            padding: 10px;
            font-size: 14px;
            color: #ee1212;
            margin-bottom: 20px;
            opacity: 0.5;
        }
    </style>
    <script>
        var idColor = "";
        var textColor = "";

        $(document).ready(function () {

            function showLoading() {
                const loading = document.getElementById("loading");
                loading.style.display = "inline-block";
            }

            function hideLoading() {
                const loading = document.getElementById("loading");
                loading.style.display = "none";
            }

            function fetchAndHandleData(url, isShowLoading, successCallback, errorCallback) {
                if (isShowLoading) {
                    showLoading();
                }
                fetch(url)
                    .then(response => response.json())
                    .then(result => {
                        hideLoading();
                        if (result.code === 200) {
                            if (successCallback) {
                                successCallback(result.data);
                            }
                        } else {
                            if (errorCallback) {
                                errorCallback("Error: " + result.message);
                            }
                        }
                    })
                    .catch(error => {
                        hideLoading();
                        if (errorCallback) {
                            errorCallback("An error occurred: " + error.message);
                        }
                    });
            }

            function nodeAction(url) {
                fetchAndHandleData(url, false, function (data) {
                    if (!data) {
                        alert("操作失败");
                    }
                },
                    function (errorMessage) {
                        alert(errorMessage);
                    });
            }

            function getNodeData(url) {
                fetchAndHandleData(url, true, function (data) {
                    if (data.includes("\n")) { // 判断是否包含换行符
                        const lines = data.split("\n"); // 按换行符分割内容为行
                        const formattedLines = lines.map(line => line.trim()); // 去除行首尾空格
                        const formattedData = formattedLines.join("\n"); // 将行拼接为字符串
                        const idRegex = /(id\s*=\s*([^\s]+)\s*)/g;
                        const textRegex = /(text\s*=\s*([^\s]+)\s*)/g;
                        var result = formattedData
                        if (isNotEmpty(idColor) && idColor.length == 6) {
                            result = result.replace(idRegex, '<span class="id-highlight" style="color: #' + idColor + ';">$&</span>');
                        }
                        if (isNotEmpty(textColor) && textColor.length == 6) {
                            result = result.replace(textRegex, '<span class="text-highlight" style="color: #' + textColor + ';">$&</span>');
                        }
                        document.querySelector("#contentRoot pre").innerHTML = result;
                    } else {
                        document.querySelector("#contentRoot pre").innerText = data; // 直接输出data
                    }
                },
                    function (errorMessage) {
                        document.querySelector("#contentRoot pre").innerText = errorMessage;
                    });
            }

            function isNotEmpty(str) {
                return str != null && str != undefined && str.length > 0;
            }

            function isEmpty(str) {
                return str == null || str == undefined || str.length <= 0;
            }

            function getHighlight() {
                fetchAndHandleData("/getHighlight", false, function (data) {
                    idColor = data[0];
                    textColor = data[1];
                    $("#highlightIdColor").val(idColor);
                    $("#highlightTextColor").val(textColor);
                });
            }

            getHighlight();

            $("#btn_menu").on("click", function () {
                const sidebar = document.getElementById("sidebar");
                const content = document.getElementById("contentRoot");
                sidebar.classList.toggle("active");
                content.classList.toggle("active");
            });

            $("#btn_quick_get_data").on("click", function () {
                getNodeData("/getPageSimpleNodeInfo");
            });

            function getScrollPath(path) {
                var distance = $("#scrollDistance").val();
                var realPath = path;
                if (isNotEmpty(distance)) {
                    realPath += "?distance=" + distance;
                }
                return realPath;
            }

            $("#top").on("click", function () {
                nodeAction(getScrollPath("/scrollUp"));
            });

            $("#right").on("click", function () {
                nodeAction(getScrollPath("/scrollRight"));
            });

            $("#bottom").on("click", function () {
                nodeAction(getScrollPath("/scrollDown"));
            });

            $("#left").on("click", function () {
                nodeAction(getScrollPath("/scrollLeft"));
            });

            $("#back").on("click", function () {
                nodeAction("/back");
            });

            $("#click").on("click", function () {
                var nodeId = $("#nodeId").val();
                var nodeText = $("#nodeText").val();
                var path = "/click";
                if (isNotEmpty(nodeId)) {
                    path += "?nodeId=" + nodeId;
                }
                if (isNotEmpty(nodeText)) {
                    if (isEmpty(nodeId)) {
                        path += "?nodeText=" + nodeText;
                    } else {
                        path += "&nodeText=" + nodeText;
                    }
                }
                if (isEmpty(nodeId) && isEmpty(nodeText)) {
                    alert("请输入节点ID或者节点Text");
                    return;
                }
                nodeAction(path);
            });

            $("#input").on("click", function () {
                var editNodeId = $("#editNodeId").val();
                var inputContent = $("#inputContent").val();

                if (isEmpty(editNodeId)) {
                    alert("请输入EditText的ID");
                    return;
                }
                var path = "/input?nodeId=" + editNodeId + "&content=" + inputContent;
                nodeAction(path);
            });

            function showSettingDialog() {
                $("#settingModalCenter").modal('show');
            };


            function hideSettingDialog() {
                $("#settingModalCenter").modal('hide');
            };

            $("#setting").on("click", function () {
                showSettingDialog();
            });

            function setConfig(type, value, successCallback) {
                var path = "/setConfig?type=" + type + "&value=" + value;
                fetchAndHandleData(path, false, function (data) {
                    if (data) {
                        if (successCallback) {
                            successCallback(value);
                        }
                        alert("设置成功，重新获取一下数据看看效果吧！");
                        hideSettingDialog();
                    } else {
                        alert("设置失败");
                    }
                },
                    function (errorMessage) {
                        alert(errorMessage);
                    });
            };

            $("#save_height_id_color").on("click", function () {
                var highlightIdColor = $("#highlightIdColor").val();
                if (highlightIdColor.length > 0 && highlightIdColor.length != 6) {
                    alert("idColor输入格式有误，请输入六位颜色值");
                    return;
                }
                setConfig("idColor", highlightIdColor, function (data) {
                    idColor = data;
                });
            });

            $("#save_height_text_color").on("click", function () {
                var highlightTextColor = $("#highlightTextColor").val();
                if (highlightTextColor.length > 0 && highlightTextColor.length != 6) {
                    alert("textColor输入格式有误，请输入六位颜色值");
                    return;
                }
                setConfig("textColor", highlightTextColor, function (data) {
                    textColor = data;
                });
            });

            $("#save_float_window_package_name").on("click", function () {
                var floatWindowPackageName = $("#float_window_package_name").val();
                setConfig("floatWindowPackageName", floatWindowPackageName);
            });

        });
    </script>

</head>

<body>
<div id="root">
    <div id="sidebar">
        <div class="input-group input-group-sm mb-3">
            <span class="input-group-text">单次滑动距离</span>
            <input type="text" class="form-control" placeholder="默认500px" id="scrollDistance">
        </div>

        <div class="remote">
            <div class="button top" id="top">↑</div>
            <div class="button bottom" id="bottom">↓</div>
            <div class="button left" id="left">←</div>
            <div class="button right" id="right">→</div>
        </div>

        <div class="action back" id="back">返回</div>

        <div class="input-group input-group-sm mb-3">
            <span class="input-group-text node">节点id</span>
            <input type="text" class="form-control" placeholder="需要点击节点的id" id="nodeId">
        </div>
        <div class="input-group input-group-sm mb-3">
            <span class="input-group-text node">节点text</span>
            <input type="text" class="form-control" placeholder="需要点击节点的text" id="nodeText">
        </div>
        <div class="action click" id="click">点击</div>

        <div class="input-group input-group-sm mb-3">
            <span class="input-group-text node">输入框id</span>
            <input type="text" class="form-control" placeholder="EditText的ID" id="editNodeId">
        </div>
        <div class="input-group input-group-sm mb-3">
            <span class="input-group-text node">输入内容</span>
            <input type="text" class="form-control" placeholder="输入的内容" id="inputContent">
        </div>
        <div class="action click" id="input">输入</div>

        <div class="clickTip">温馨提示：【点击】当id或者text唯一时，任选一个输入即可；当同一个id或者一个text对应多个节点时候，同时用id和text确保节点唯一性！</div>

    </div>

    <div id="topNavContainer">
        <button type="button" id="btn_menu" class="navButton btn btn-primary">
            <svg width="20" height="20" fill="currentColor" class="bi bi-list" style="color: #ffffff;"
                 viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                      d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
            </svg>
        </button>
        <button id="btn_quick_get_data" class="navButton btn btn-primary">一键获取手机当前窗口节点数据
            <span class="spinner-border spinner-border-sm" id="loading" style="display: none;"></span>
        </button>

        <div class="navButton setting click" id="setting">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear"
                 viewBox="0 0 16 16">
                <path
                        d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
                <path
                        d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
            </svg>
        </div>
    </div>

    <div id="contentRoot">
        <pre></pre>
    </div>
</div>
<!-- 设置配置弹框模块 -->
<div class="modal fade" id="settingModalCenter" tabindex="-1" role="dialog"
     aria-labelledby="settingModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="settingModalCenterTitle">配置</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text node">高亮ID</span>
                            <input type="text" class="form-control setting" placeholder="默认不高亮，如需请输入六位数色值，例如: 78a4eb"
                                   id="highlightIdColor">
                            <button class="btn btn-outline-secondary" type="button" id="save_height_id_color">保存</button>
                        </div>
                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text node">高亮Text</span>
                            <input type="text" class="form-control setting" placeholder="默认不高亮，如需请输入六位数色值，例如: f33652"
                                   id="highlightTextColor">
                            <button class="btn btn-outline-secondary" type="button" id="save_height_text_color">保存</button>
                        </div>
                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text node" style="font-size: 10px">悬浮窗包名</span>
                            <input type="text" class="form-control setting" placeholder="如果需要获取悬浮窗的节点信息，请输入悬浮窗所属APP的包名"
                                   id="float_window_package_name">
                            <button class="btn btn-outline-secondary" type="button" id="save_float_window_package_name">保存</button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 配置弹框模块 -->
</body>

</html>